<template>
    <el-form
        :ref="'fieldForm_' + formModular"
        class="crm-create-box"
        :model="fieldList"
        label-position="top">
        <el-form-item
            v-for="(item, index) in fieldList[formModular]" 
            :key="index"
            :rules="rules[item.key]"
            class="crm-create-item" 
            :style="{'padding-left': getPaddingLeft(item, index), 'padding-right': getPaddingRight(item, index)}" 
            :prop="formModular + '.' + index + '.value'">
            <div
                slot="label"
                style="display: inline-block;">
                <div style="margin:5px 0;font-size:12px;word-wrap:break-word;word-break:break-all;">
                    {{ item.data.name }}
                </div>
            </div>
            <component
                :is="item.data.formType | typeToComponentName"
                :value="item.value"
                :item="item"
                :index="index"
                :disabled="item.disabled"
                @value-change="fieldValueChange"/>
        </el-form-item>
    </el-form>
</template>

<script>
import {
    XhInput,
    XhAutocomplete,
    XhTextarea,
    XhSelect,
    XhDate,
    XhDateTime,
    XhFiles,
} from '@/components/CreateCom'
import {
  objDeepCopy,
} from '@/utils'
export default {
    name: 'XhContractForm', 
    components: {
        XhInput,
        XhAutocomplete,
        XhTextarea,
        XhSelect,
        XhDate,
        XhDateTime,
        XhFiles,
    },
    props: {
        formData: {
            type: Object,
            default: () => {
                return {}
            }
        },
        formModular: [String],
        formRules: {
            type: Object,
            default: () => {
                return {}
            }
        },
        value: {
            type: Object,
            default: () => {
                return {}
            }
        },
        options: {
            type: Array,
            default: () => {
                return []
            }
        },
        action: {
            type: Object,
            default: () => {
                return {
                    type: 'save',
                    id: '',
                    data: {} // 编辑所需信息
                }
            }
        }
    },
    filters: {
        /** 根据type 找到组件 */
        typeToComponentName(formType) {
            if (
                formType == 'text' ||
                formType == 'number' ||
                formType == 'floatnumber' ||
                formType == 'mobile' ||
                formType == 'email'
            ) {
                return 'XhInput'
            } else if (formType == 'autocomplete') {
                return 'XhAutocomplete'
            } else if (formType == 'textarea') {
                return 'XhTextarea'
            } else if (formType == 'select' || formType == 'business_status') {
                return 'XhSelect'
            } else if (formType == 'file') {
                return 'XhFiles'
            } else if (formType == 'date') {
                return 'XhDate'
            } else if (formType == 'datetime') {
                return 'XhDateTime'
            } 
        }
    },
    computed: {
        contractValue(){
            return JSON.parse(JSON.stringify(this.value));
        }
    },
    watch: {
        contractValue: {
            handler(newVal,oldVal){
                if(newVal.contractInfo || newVal.partInvoice){
                    if(!oldVal || newVal.contractInfo.customerId != oldVal.contractInfo.customerId){
                        this.handleFormData(newVal,'customer');
                    }
                    if(!oldVal || newVal.contractInfo.quotationId != oldVal.contractInfo.quotationId){
                        this.handleFormData(newVal,'quotation');
                    }
                    if(!oldVal || newVal.partInvoice.customerId != oldVal.partInvoice.customerId){
                        if(this.formModular == 'invoice'){
                            // debugger
                            this.handleFormData(newVal,'partInvoice');
                        }
                        
                    }
                }
            },
            deep: true,
            immediate: true
        },
        options: {
            handler(val,oldVal){
                if(this.formModular == 'pdaa'){
                    if(this.fieldList[this.formModular]){
                        let form = this.fieldList[this.formModular].find(item => {return item.key == 'hardwareDeliveryConditions'})
                        form.data.setting = val
                        if(oldVal && oldVal.length){
                            if(val.length < oldVal.length){
                                form.value=""
                            }
                        }
                        if(!val.length){
                            form.value=""
                        }
                    }
                }
            },
            deep: true,
            immediate: true
        }
    },
    data(){
        return {
            fieldList: {},
            rules: {}
        }
    },
    mounted() {
        this.fieldList = objDeepCopy(this.formData)
        this.rules = objDeepCopy(this.formRules)
    },
    methods: {
     
        // 获取左边padding
        getPaddingLeft(item, index) {
            return index % 2 == 0 ? '0' : '25px'
        },
        // 获取左边padding
        getPaddingRight(item, index) {
            return index % 2 == 0 ? '25px' : '0'
        },
        
        // 表单默认处理的处理
        handleFormData(data,type){
            //甲方信息
            let fields = this.fieldList[this.formModular]
            if(!fields){
                return ;
            }
            // 受到客户的更新影响
            if(type == 'customer'){
                //甲方信息
                if(this.formModular == 'partA'){ 
                    if(data.contractInfo.customerId){
                        fields.map(field => {
                            field.value = data.contractInfo[field.key] ? data.contractInfo[field.key] : (field.data.defaultValue ? field.data.defaultValue : '');
                        })
                    }else{
                        fields.map(field => {
                            field.value = field.data.defaultValue ? field.data.defaultValue : ''
                        })
                    }
                    
                }

                //产品交付与验收
                if(this.formModular == 'pdaa'){
                    if(data.contractInfo.customerId){
                        fields.map(field => {
                            field.value = data.contractInfo[field.key] ? data.contractInfo[field.key] : (field.data.defaultValue ? field.data.defaultValue : '');
                        })
                    }else{
                        fields.map(field => {
                            field.value = field.data.defaultValue ? field.data.defaultValue : ''
                        })
                    }
                }

                //质量保证、保修及服务期限
                if(this.formModular == 'qas'){
                    if(data.contractInfo.customerId){
                        fields.map(field => {
                            field.value = data.contractInfo[field.key] ? data.contractInfo[field.key] : (field.data.defaultValue ? field.data.defaultValue : '');
                        })
                    }else{
                        fields.map(field => {
                            field.value = field.data.defaultValue ? field.data.defaultValue : ''
                        })
                    }
                }

                //一般条款
                if(this.formModular == 'other'){
                    if(data.contractInfo.customerId){
                        fields.map(field => {
                            field.value = data.contractInfo[field.key] ? data.contractInfo[field.key] : (field.data.defaultValue ? field.data.defaultValue : '');
                        })
                    }else{
                        fields.map(field => {
                            field.value = field.data.defaultValue ? field.data.defaultValue : ''
                        })
                    }
                }
            }
            
            // 受到报价的更新影响
            if(type == 'quotation'){
                //乙方信息
                if(this.formModular == 'partB'){ 
                    if(data.contractInfo.quotationId){
                        fields.map(field => {
                            field.value = data.contractInfo[field.key] ? data.contractInfo[field.key] : (field.data.defaultValue ? field.data.defaultValue : '');
                        })
                    }else{
                        fields.map(field => {
                            field.value = field.data.defaultValue ? field.data.defaultValue : ''
                        })
                    }
                }
            }

            if(type == 'partInvoice'){
                //甲方开票信息
                if(this.formModular == 'invoice'){
                    if(data.contractInfo.customerId){
                        this.$nextTick(() => {
                            fields.map(field => {
                                field.value = data.partInvoice[field.key] ? data.partInvoice[field.key] : (field.data.defaultValue ? field.data.defaultValue : '');
                            })
                        })
                    }else{
                        fields.map(field => {
                            field.value = field.data.defaultValue ? field.data.defaultValue : ''
                        })
                    }
                }
            }
            
        },

        fieldValueChange(data){
            let item = this.fieldList[this.formModular][data.index];
            item.value = data.value
            let param = data;
            // console.log("更改值：")
            // console.log(param)
            param.formModular = this.formModular;
            this.$emit('value-change',param);
        }
    }
}
</script>

<style lang="scss" scoped>
/** 将其改变为flex布局 */
.crm-create-box {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}

.crm-create-item {
  flex: 0 0 50%;
  flex-shrink: 0;
  // overflow: hidden;
  align-items: flex-start;
  padding-bottom: 10px;
}


.el-form-item /deep/ .el-form-item__label {
  line-height: normal;
  font-size: 13px;
  color: #333333;
  position: relative;
  padding-left: 8px;
  padding-bottom: 0;
}

.el-form /deep/ .el-form-item {
  margin-bottom: 0px;
}

.el-form /deep/ .el-form-item.is-required .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
  position: absolute;
  left: 0;
  top: 5px;
}
</style>